<template>
	<view class=" ">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<tn-navbar>停车券管理</tn-navbar>
			</template>
			<view class="tn-p ">
				<view
					v-for="(item, index) in dataList"
					:key="index"
					class="tn-shadow tn-p tn-mb tn-radius tn-white_text tn-gradient-bg__cool-5
"
				>
					<view class="tn-flex justify-between  justify-start  tn-mb-sm">
						<view>
							<text class="tn-text-xl tn-text-bold">{{ item.name }}</text>
						</view>
						<text class=" tn-round tn-gray-dark_text tn-yellow_bg    tn-text-bold tn-pt-xs  tn-pb-xs tn-pr-sm tn-pl-sm">{{ item.type }}</text>
					</view>
					<view class="coupon-details  tn-mt tn-pt tn-pl-0 tn-pr-0">
						<view class="tn-flex justify-start tn-mb-sm">
							<tn-icon name="clock" size="40" color="#ffffff"></tn-icon>
							<text>时长：{{ item.duration.value }} {{ item.duration.unit }}</text>
						</view>
						<view class="tn-flex justify-start tn-mb-sm">
							<tn-icon name="tips-fill" size="40" color="#ffffff"></tn-icon>
							<text>额度：{{ item.amount }}</text>
						</view>
						<view class="tn-flex justify-start tn-mb-sm">
							<tn-icon name="tag" size="40" color="#ffffff"></tn-icon>
							<text>单价：{{ item.price }} 元/小时</text>
						</view>
					</view>
					<view class="tn-flex justify-end tn-mt-sm ">
						<view class="tn-flex justify-evenly ">
							<view class="tn-mr">
								<tn-button bg-color="tn-indigo" text-color="tn-white">
									<tn-icon name="edit" size="30" color="#ffffff"></tn-icon>
									编辑
								</tn-button>
							</view>
							<view class="">
								<tn-button bg-color="tn-red" text-color="tn-white">
									<tn-icon name="delete" size="30"></tn-icon>
									删除
								</tn-button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<template #loadingMoreNoMore></template>
		</z-paging>

		<view>
			<!-- 悬浮按钮 -->
			<tn-suspend-button icon="add" size="sm" bg-color="tn-gradient-bg__cool-5" text-color="tn-white" @click="openEditPopup" />
			<!-- 添加停车券配置 -->
			<tn-popup v-model="isPopupVisible" width="90%" open-direction="center" @close="closePopup" close-btn :overlay-closeable="false">
				<view class="tn-m-sm tn-p-sm">
					<tn-form ref="formRef" :model="formData" label-position="top">
						<tn-form-item label="所属车场"><tn-input v-model="formData.parkingLotName" disabled></tn-input></tn-form-item>
						<tn-form-item label="停车券名称"><tn-input v-model="formData.carPlate"></tn-input></tn-form-item>
						<tn-form-item label="停车券类型" prop="billingMethod">
							<!-- <view @click="openPicker('couponType')">  -->
							<tn-bubble-box :options="COUPON_TYPE" position="bottom" @click="confirmBubble(COUPON_TYPE, 'couponType', $event)">
								<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择停车券类型" />
							</tn-bubble-box>
							<!-- </view> -->
						</tn-form-item>
						<tn-form-item label="停车券单位" prop="carType">
							<!-- <view @click="openPicker('couponUnits')"> -->
							<tn-bubble-box :options="COUPON_UNITS" position="bottom" @click="confirmBubble(COUPON_UNITS, 'couponUnits', $event)">
								<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponUnits[formData.couponUnits]" placeholder="请选择停车券单位" />
							</tn-bubble-box>
							<!-- </view> -->
						</tn-form-item>
						<tn-form-item label="额度"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
						<tn-form-item label="单价(元)"><tn-input v-model="formData.remark"></tn-input></tn-form-item>
						<view class="tn-flex justify-between"><tn-button @click="confirmEdit" size="lg" width="100%" bg-color="tn-blue">确认</tn-button></view>
					</tn-form>
				</view>
			</tn-popup>
			<!-- 选择器 -->
			<tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />
		</view>
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import TnSuspendButton from 'tnuiv3p-tn-suspend-button/index.vue';
import { COUPON_TYPE, COUPON_UNITS } from '@/utils/dict'; // 引入计费方式和车型字典
import { onLoad } from '@dcloudio/uni-app';
// ===============模拟数据 =========================

// 模拟数据
const tempList = ref([]);

// z-paging 示例
const paging = ref(null);
// 数据列表
const dataList = ref();

const queryList = (pageNo, pageSize) => {
	// 模拟数据

	for (let i = 0; i < 10; i++) {
		tempList.value.push({
			name: '免费3小时' + i,
			type: '停车金额减免',
			duration: { value: 3, unit: '小时' },
			amount: '3小时',
			price: 2
		});
	}
	paging.value.complete(tempList.value);
};

// ===========================================

// 控制添加黑名单弹框
const isPopupVisible = ref(false);

const openEditPopup = () => {
	formData.value.parkingLotName = '停车场';
	isPopupVisible.value = true;
};

const closePopup = () => {
	isPopupVisible.value = false;
};
const confirmEdit = () => {
	console.log(formData.value);
	// 确认修改逻辑
	closePopup();
};

// 字典枚举映射
const pickerDict = ref({
	dict: {
		couponUnits: COUPON_UNITS,
		couponType: COUPON_TYPE
	},
	label: {}
});

// 选择器key
const pickerKey = ref('');
// 选择器数据
const pickerData = ref([]);

// 控制选择器的可见性
const openPickerVisible = ref(false);

// 打开选择器
const openPicker = type => {
	pickerKey.value = type;
	pickerData.value = pickerDict.value.dict[type];
	openPickerVisible.value = true; // 显示选择器
};

// 关闭选择器
const closePicker = () => {
	openPickerVisible.value = false; // 隐藏选择器
};

// 确认选择器的选择
const confirmPicker = value => {
	formData.value[pickerKey.value] = value;
	closePicker(); // 关闭选择器
};
// 确认选择器的选择
const confirmBubble = (dict, labelKey, value) => {
	console.log('confirmBubble=>', labelKey);
	console.log('confirmBubble1=>', dict[value].value);
	formData.value[labelKey] = dict[value].value;
	// closePicker(); // 关闭选择器
};
// 处理pickerDict.value 内的字典数据格式为 {billingMethod:{value:label}}
const getDictLabel = () => {
	pickerDict.value.label = {};
	for (let key in pickerDict.value.dict) {
		let dict = pickerDict.value.dict[key];
		pickerDict.value.label[key] = dict.reduce((acc, cur) => {
			acc[cur.value] = cur.label || cur.text;
			return acc;
		}, {});
	}
};

// 表单数据模型
const formData = ref({
	parkingLotName: null,
	couponType: '',
	couponUnits: '',
	ownerPhone: '',
	address: '',
	billingMethod: '',
	unitPrice: '',
	quantity: '',
	balance: '',
	amountReceivable: '',
	amountReceived: '',
	validityStart: '',
	validityEnd: '',
	carType: '',
	remarks: '',
	noRenewal: null
});

onLoad(() => {
	getDictLabel();
});
</script>
<style lang="scss" scoped>
.coupon-details {
	border-top: 1px dashed rgba(255, 255, 255, 0.5);
	border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}

.coupon-footer {
	font-size: 14px;
	text-align: center;
	opacity: 0.8;
}
</style>
